<template>
    <view class="container">

        <cunstom_navigation_bar :tapEvent="goback" :title="`发布`" :propStyles="propStyles">
        </cunstom_navigation_bar>
        <view class="contentBox">
            <view class="topLine">

                <textarea placeholder-style="font-size:20rpx;color:#333" v-model="publishText" auto-height
                    placeholder="20字以上真实分享，搭配清晰视频和图片，帖子上首页几率更大哦~" />

                <uni-file-picker v-model="publishImgs" limit="10" file-mediatype="image" :auto-upload="false"
                    @select="selectFileAchieve($event)" @delete="deleteFileAchieve($event)">
                </uni-file-picker>
            </view>
            <view class="labels">
                <view class="left">发布到:</view>
                <view class="label">做饭教程</view>
                <view class="label">家常饭</view>
                <view class="label">川菜</view>
            </view>
            <view class="location">
                <view class="left">
                    <image class="addIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookPersonal/addIcon.png">
                    </image>
                    <text>所在位置</text>
                </view>

                <image class="arrow" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookPersonal/arrow.png"></image>

            </view>
        </view>
        <view class="fixBar">
            <view class="save" @click="save()">
                发布
            </view>
        </view>

    </view>


    </view>
</template>

<script>
    const api = require("@/utils/api.js");
    const util = require("@/utils/util.js");
    const app = getApp();

    // import cunstomNavigationBar from '../../components/customNavigationBar/customNavigationBar.vue'
    export default {
        data() {
            return {
                publishText: '',
                publishImgs: [],
                picData: [],
                codeId: '',
                openId: '',
                avatarUrl: 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/page_login/headPortrait.png',
                hasLogin: false,
                indicatorDots: false,
                selectedIndex: 0,
                cookInfoData: [
                    {
                        nickName: 'charlotte',
                        gender: 0,
                        age: 26,
                        addr: '广州',
                        text: '厨娘平台真的很给力！！尽情享受',
                        tag: '做饭教程',
                        url: '',
                        type: 'image',
                        hashTag: '做饭',
                        liked: 20,
                        hasLiked: true,
                        share: 33,
                        comment: 209,
                        collection: 99,
                        hasCollect: true
                    },
                    {
                        nickName: '中华小当家',
                        gender: 1,
                        age: 26,
                        addr: '广州',
                        text: '厨娘平台真的很给力！！尽情享受',
                        tag: '做饭教程',
                        url: '',
                        type: 'image',
                        hashTag: '做饭',
                        liked: 20,
                        hasLiked: true,
                        share: 33,
                        comment: 209,
                        collection: 99,
                        hasCollect: false

                    }, {
                        nickName: 'mark',
                        gender: 0,
                        age: 26,
                        addr: '广州',
                        text: '厨娘平台真的很给力！！尽情享受',
                        tag: '做饭教程',
                        url: '',
                        type: 'video',
                        hashTag: '做饭',
                        liked: 20,
                        hasLiked: false,
                        share: 33,
                        comment: 209,
                        collection: 99,
                        hasCollect: true

                    }
                ],


                imgUrl: '',

                queryParams: {
                    "modulesId": '', //模块id
                    "mallProductName": '', //商品名称
                    "pageNum": 1, //页数
                    "pageSize": 200 //每页数量
                },
                propStyles: {
                    iconSrc: "black",
                    txtColor: '#333333',
                }

            };
        },

        methods: {
            selectFileAchieve(chooseImageRes) {

                const tempFilePaths = chooseImageRes.tempFilePaths;
                uni.uploadFile({
                    url: process.env.VUE_APP_BASE_URL + '/stage-api/wechat/artistInfo/upload', //后端用于处理图片并返回图片地址的接口   
                    filePath: tempFilePaths[0],
                    name: 'file',

                    success: res => {
                        let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式  
                        // data.data.fileName; data.data.url;
                        this.formData4.achieveImgs.push(
                            {
                                name: data.data.name,
                                uuid: data.data.name,
                                extname: "jpg",
                                cloudPath: data.data.fileName,
                                fileType: "image",
                                url: data.data.url,
                                // image: { "width": 580, "height": 773, "location": data.data.url },
                                path: data.data.url, "progress": 0, "status": "ready"
                            }
                        );
                    },
                    fail: (err) => {
                        console.log("err", err);
                    }
                })
            },
            deleteFileAchieve(e) {
                console.log(" e.tempFilePath:" + e.tempFile.name);

            },
            goback() {
                uni.navigateBack()
            },
            changeIndex(index) {
                this.selectedIndex = index
            },
            closeInvitate() {
                this.$refs.popUpCoupon.close();
            },




            iconClick() {
                console.log('填写信息~~', this.searchScenicName);
                if (this.searchScenicName === '') {
                    this.searchScenicName = "南京海底世界"
                }
                uni.navigateTo({
                    url: `/page_ticketSearchResult/ticketSearchResult?key=${this.searchScenicName}`
                })
            },
            jumpTo(url, isTabPage, mustLogin) {
                console.log('首页手机号~~', app.globalData.phone);
                if (mustLogin && !app.globalData.phone) {
                    //去登录授权
                    uni.navigateTo({
                        url: `/page_login/login?from=myInfo`,
                    })
                    return
                }
                if (!url) {
                    util.toast('敬请期待~')
                    return
                }
                console.log('1111');
                if (isTabPage) {
                    console.log('2222');
                    uni.switchTab({
                        url: `${url}`,
                    })
                } else {
                    console.log('333');
                    uni.navigateTo({
                        url: `${url}`
                    })
                }

            },

            getTopicPic() {

                util.request(api.selectTopicPic,
                    { type: 1 }

                    , 'GET', 'application/json').then(res => {

                        if (res.code == 200) {
                            this.picData = res.data
                            console.log('this.picData.length~~', this.picData.length);

                            if (this.picData.length > 1) {
                                this.indicatorDots = true
                            }




                        } else {

                            util.toast('查询失败')
                        }

                    }).catch((err) => {
                        console.log('err', err)

                    });

            },
            getProductList() {

                util.request(api.productList,
                    this.queryParams

                    , 'GET', 'application/json').then(res => {

                        if (res.code == 200) {
                            this.productData = res.rows
                            // this.showData = res.data;




                        } else {

                            util.toast('查询失败')
                        }

                    }).catch((err) => {
                        console.log('err', err)

                    });

            },
            jumpUrl(e) {
                if (e == '21') {
                    uni.navigateTo({
                        url: `/page_artExhibition/artExhibition`,
                    });
                } else if (e == '11') {
                    // uni.navigateTo({
                    //         url: `/page_login/login`,
                    //       })
                    uni.switchTab({
                        url: '/pages/robot/robot',
                    })

                } else if (e == '11') {

                    uni.switchTab({
                        url: '/pages/robot/robot',
                    })

                } else if (e == '31') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao1=true`,
                    });
                    // url: `/page_webView/webView?url=https://im.huizhihuyuai.com/chatPage&${key}=true`,
                } else if (e == '32') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao2=true`,
                    });

                } else if (e == '41') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao6=true`,
                    });

                } else if (e == '42') {
                    uni.navigateTo({
                        url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao7=true`,
                    });

                } else if (e == '22') {

                    uni.navigateTo({
                        // url: `/page_webView/webView?url=https://mp.weixin.qq.com/s&gongzhonghao3=true`,
                        url: '/page_digitalHuman/digitalHuman',
                    });

                }

            },




            animationfinish(e) {

                let getTimestamp = new Date().getTime();
                if (e.detail.current == 0) {
                    this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
                    this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
                } else if (e.detail.current == 1) {
                    this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
                    this.swiperSrc33 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (3) + '.gif' + "?timestamp=" + getTimestamp
                } else if (e.detail.current == 2) {
                    this.swiperSrc11 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (1) + '.gif' + "?timestamp=" + getTimestamp
                    this.swiperSrc22 = 'https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/Baner' + (2) + '.gif' + "?timestamp=" + getTimestamp
                }
            },
            nextStep: function () {
                if (this.hasLogin) {
                    //扫码
                    this.scanFun()
                } else {
                    uni.navigateTo({
                        url: `/page_login/login`,
                    })
                }

            },
            loginByWeixin: function () {
                var that = this;
                let code = null;
                console.log('登录信息~~~111');
                return new Promise(function (resolve, reject) {
                    return util.login().then((res) => {
                        code = res.code;
                    }).then(() => {
                        util.request(api.AuthLoginByWeixin, {
                            appid: 'wx3a64d38adf2dfc10',
                            code: code
                        }, 'GET', 'application/json').then(res => {
                            if (res.code === 200) {
                                //存储用户信息
                                that.openId = res.data.openid;
                                app.globalData.openId = res.data.openid;
                                that.queryUserinfo()

                                resolve(res);
                            } else {
                                reject(res);
                            }
                        }).catch((err) => {
                            reject(err);
                        });
                    }).catch((err) => {
                        reject(err);
                    })
                });
            },
            queryUserinfo() {

                util.request(api.GetUserInfo, {

                    openId: this.openId
                }, 'GET', 'application/json').then(res => {
                    console.log('查询用户信息~~~111', res.code);
                    if (res.code === 200) {

                        if (res.data) {

                            app.globalData.userInfo.avatarUrl = res.data.headPicture;
                            app.globalData.userInfo.nickName = res.data.nickName;
                            app.globalData.companyName = res.data.orgName;
                            app.globalData.code = res.data.code;
                            console.log('查询用户信息~~~222', res.data.phone);
                            app.globalData.phone = res.data.phone;
                            // app.globalData.token = res.data.token;
                            app.globalData.artistState = res.data.artistState;
                            app.globalData.artistId = res.data.artistId;
                            util.setUserInfo(res.data.phone, res.data.token)
                            console.log('首页设置昵称头像', app.globalData.userInfo.nickName, app.globalData.userInfo.avatarUrl, res.data.nickName)
                            this.hasLogin = true;
                            uni.$emit('login', {

                            });
                            if (this.codeId) {
                                console.log('this.codeId~~222', this.codeId)
                                this.queryHandle(this.codeId)
                            }

                        } else {

                            this.hasLogin = false;
                            if (this.codeId) {
                                uni.navigateTo({
                                    url: `/page_login/login`,
                                })
                            }

                        }

                        resolve(res);
                    } else {

                        app.globalData.userInfo.avatarUrl = this.avatarUrl;
                        app.globalData.userInfo.nickName = '设置昵称';
                        app.globalData.userInfo.userName = '点击去登录';
                        app.globalData.companyName = '';
                        app.globalData.code = '';
                        util.toast('网络异常，请重试')
                        reject(res);
                    }
                }).catch((err) => {

                });

            },
            queryHandle(code) {
                console.log('标识解析~', code)
                util.request(api.QuewryHandles, {
                    handle: code,
                }, 'GET', 'application/json').then(res => {

                    if (res.code == 200) {
                        uni.navigateTo({
                            url: `/page_certificate/certificate?code=${code}`,
                        })

                    } else {
                        util.toast(res.msg)

                    }

                }).catch((err) => {
                    console.log('err', err)

                });
            },
            scanFun() {
                const that = this
                uni.scanCode({
                    success: function (res) {
                        const qrUrl = decodeURIComponent(res.result);
                        console.log('条码类型：' + res.result);
                        console.log('qrUrl:' + qrUrl);
                        let code = qrUrl.split('code=')[1];
                        console.log(typeof code, code)
                        that.queryHandle(code)
                        // util.request(api.QuewryHandles, {
                        //   handle: code,
                        // }, 'GET', 'application/json').then(res => {

                        //   if (res.code == 200) {
                        //     uni.navigateTo({
                        //       url: `/page_certificate/certificate?code=${code}`,
                        //     })

                        //   } else {
                        //     util.toast(res.msg)
                        //     // uni.switchTab({
                        //     //   url: '/pages/index/index',
                        //     // })
                        //   }

                        // }).catch((err) => {
                        //   console.log('err', err)

                        // });

                    }
                });
            },
            // 判断是否有可领优惠券
            checkIndexReceiveCoupon() {
                let that = this;
                util.request(api.checkIndexReceiveCoupon, {
                }, 'GET', 'application/json').then(res => {
                    if (res.code == 200) {
                        console.log("优惠券:" + res.data);
                        that.couponInfo = res.data;
                        if (that.couponInfo.id) {
                            that.$refs.popUpCoupon.open('center')
                        }

                        // 默认领取优惠券
                        that.receiveCoupon();
                    } else {
                        //util.toast(res.msg)
                    }

                }).catch((err) => {
                    console.log('err', err)
                });
            },
            // 领取优惠券
            receiveCoupon() {
                let that = this;
                if (this.couponInfo.id) {
                    util.request(api.receiveCoupon, {
                        id: that.couponInfo.id
                    }, 'POST', 'application/json').then(res => {
                        if (res.code == 200) {
                            console.log("领取成功");
                        }

                    }).catch((err) => {
                        console.log('err', err)
                    });

                }
            },

            // 获取优惠券价格
            getCouponInfoPrice() {
                if (this.couponInfo.type == 0) {
                    return this.getPrice(this.couponInfo.preferentialVal);
                } else if (this.couponInfo.type == 1) {
                    return (this.couponInfo.ratioVal / 10).toFixed(1) + "折";
                }
            },
            getPrice(price) {
                if (this.isParsableNumber(price)) {
                    return (price / 100).toFixed(2);
                } else {
                    return "--";
                }
            },
            isParsableNumber(n) {
                return !isNaN(parseFloat(n)) && isFinite(parseFloat(n));
            }


        },



        mounted() {


        },
        created() {

        },
        onLoad: function (option) {

            this.imgUrl = process.env.VUE_APP_BASE_URL + '/stage-api/file/statics'










        },
        onUnload() {

        },
        onShow: function () {
            uni.hideTabBar()

        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;

    }
</style>
<style lang="scss" scoped>
    page {
        background-color: #F8F8F8 !important;
    }



    .contentBox {
        margin-top: 20rpx;

        .topLine {
            width: 750rpx;
            min-height: 320rpx;
            background: #FFFFFF;
            padding: 32rpx 30rpx;
            box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            textarea {
                width: 100%;

            }
        }

        .labels {
            padding: 0rpx 30rpx;
            width: 750rpx;
            height: 106rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            margin-top: 20rpx;
            display: flex;
            align-items: center;

            .left {
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
                margin-right: 36rpx;
            }

            .label {
                padding: 0rpx 14rpx;
                height: 38rpx;
                background: rgba(51, 51, 51, 0.05);
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                margin-right: 36rpx;
                font-family: OPPOSans, OPPOSans;
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.8);
            }

        }

        .location {
            padding: 0rpx 30rpx;
            width: 750rpx;
            height: 106rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                display: flex;
                align-items: center;

                .addIcon {
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 16rpx;
                }

                text {
                    color: #333333;
                }
            }

            .arrow {
                width: 16rpx;
                height: 30rpx;
            }
        }


    }


    .fixBar {
        width: 750rpx;
        height: 130rpx;

        position: fixed;
        bottom: 0rpx;
        left: 0rpx;
        display: flex;
        align-items: center;
        justify-content: center;




        .save {
            width: 644rpx;
            height: 98rpx;
            background: #FECF01;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.07);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            line-height: 98rpx;
            text-align: center;
        }



    }






    .zhanwei {
        width: 750rpx;
        height: 172rpx;
        background: #F4F4F2;
    }




    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }
</style>